{% extends "basic.html" %} {%block body%}
<!--<style type="text/css">
    /* base styles */
    
    html {
        -webkit-text-size-adjust: none;
    }
    
    body {
        margin: 0;
        padding: 0;
        font: 14px/1.4 Arial, Helvetica, sans-serif;
        color: black;
    }
    
    h1 {
        margin: 0 0 6px 0;
        font-size: 20px;
        color: black;
    }
    
    h2 {
        font-weight: normal;
        color: #666;
        font-size: 14px;
        margin: 0 0 22px 0;
    }
    
    .footnotes {
        margin-bottom: 20px;
    }
    
    .footnotes h4 {
        margin: 2px 0 7px 0;
        color: #666;
        font-size: 11px;
    }
    
    .footnotes p,
    .footer p {
        margin: 2px 0 0 0;
        font-size: 11px;
        line-height: 1.3;
        color: #808080;
    }
    
    a,
    a:link,
    a:visited {
        color: #4774CC;
        text-decoration: none;
    }
    
    a:hover,
    a:active {
        opacity: 0.7;
    }
</style>-->
<style>
    .area {
        fill: steelblue;
        clip-path: url(#clip);
    }
    
    .zoom {
        cursor: move;
        fill: none;
        pointer-events: all;
    }
</style>

<div id="page-wrapper">

    <div class="container-fluid">

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Charts
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-dashboard"></i> <a href="index.html">Dashboard</a>
                    </li>
                    <li class="active">
                        <i class="fa fa-bar-chart-o"></i> Charts
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        <!-- Flot Charts -->
        <!--<div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">Flot Charts</h2>
                <p class="lead">Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. For full usage instructions and documentation for Flot Charts, visit <a href="http://www.flotcharts.org/">http://www.flotcharts.org/</a>.</p>
            </div>
        </div>-->
        <!-- /.row -->

        <!--filter form-->
        <div class="row">
            <div class="col-lg-8">
                <form id="convFilter" class="form-horizontal" method="post" action="/filter_chart1">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="keywords">LinkRef</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="LinkRef" id="LinkRef" placeholder="e.g. AL100">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="dialogAct">DataQuality</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="DataQuality" id="DataQuality" placeholder="e.g. 1">
                            </div>
                        </div>
                        <!--<div class="form-group">
                            <label class="col-sm-4 control-label" for="slot">AverageSpeed</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="AverageSpeed" id="AverageSpeed" placeholder="e.g. >127.5">
                            </div>
                        </div>-->
                    </div>
                    <div class="col-md-6">
                        <div class="form-group ">
                            <label class="col-sm-4 control-label" for="fromDate">From</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="fromDate" id="fromDate" placeholder="e.g. 01/25/15">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="toDate">To</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="toDate" id="toDate" placeholder="e.g. 02/25/15">
                            </div>
                        </div>
                        <div class="col-sm-offset-4 col-sm-8">
                            <!--<button type="button" id="find-all" class="btn btn-primary">Find All</button>-->
                            <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
        <!--end filter form-->

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Line Chart of Traffic Flow</h3>
                    </div>
                    <div class="panel-body">
                        <div class="col-xs-12">
                            <svg id="flot-line-chart" width="960" height="500"></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->

        <!--<div class="row">

            <div class="col-lg-12">
                <div class="panel panel-yellow">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Parallel coordinate chart</h3>
                    </div>
                    <div class="panel-body">
                        <div class="col-xs-12">
                            <div id="flot-multiple-axes-chart" width="960" height="500"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>-->
        <!-- /.row -->

        <!--<div class="row">
            <div class="col-lg-6">
                <div class="panel panel-red">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Moving Line Chart</h3>
                    </div>
                    <div class="panel-body">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-moving-line-chart"></div>
                        </div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Bar Graph with Tooltips</h3>
                    </div>
                    <div class="panel-body">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-bar-chart"></div>
                        </div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
        <!-- /.row -->

        <!-- Morris Charts -->
        <!--<div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">Morris Charts</h2>
                <p class="lead">Morris.js is a very simple API for drawing line, bar, area and donut charts. For full usage instructions and documentation for Morris.js charts, visit <a href="http://morrisjs.github.io/morris.js/">http://morrisjs.github.io/morris.js/</a>.</p>
            </div>
        </div>-->
        <!-- /.row -->

        <!--<div class="row">
            <div class="col-lg-12">
                <div class="panel panel-green">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Area Line Graph Example with Tooltips</h3>
                    </div>
                    <div class="panel-body">
                        <div id="morris-area-chart"></div>
                    </div>
                </div>
            </div>
        </div>-->
        <!-- /.row -->

        <!--<div class="row">
            <div class="col-lg-4">
                <div class="panel panel-yellow">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Donut Chart Example</h3>
                    </div>
                    <div class="panel-body">
                        <div id="morris-donut-chart"></div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="panel panel-red">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Line Graph Example with Tooltips</h3>
                    </div>
                    <div class="panel-body">
                        <div id="morris-line-chart"></div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Bar Graph Example</h3>
                    </div>
                    <div class="panel-body">
                        <div id="morris-bar-chart"></div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
        <!-- /.row -->

    </div>
    <!-- /.container-fluid -->

</div>
<!--<script src="https://d3js.org/d3.v4.min.js">
</script>
<script src="static/js/lineChart.js" type="text/javascript"></script>
<script type="text/javascript">
    function pad(num, n) {
        return Array(n > num ? (n - ('' + num).length + 1) : 0).join(0) + num;
    }
    var format = d3.time.format("%m/%d/%y %H:%M");
    //var c = format.parse("03/01/15 00:00");
    var graphic1 = d3.custom.lineChart()
        .xAccess(function(d) {
            var m = (d.TimePeriod * 15) % 60;
            var h = parseInt((d.TimePeriod * 15) / 60);
            var b = d.Date + ' ' + pad(h, 2) + ':' + pad(m, 2);
            var a = format.parse(b);
            return a;
        })
        .yAccess(function(d) {
            return +d.Flow;
        })
        .yAxisLabel("Flow")
        .xFormat(d3.time.format("%y/%m/%d"))
        .xScale(d3.time.scale())
        .tooltipFormat(d3.format("0.2f"))
        .strokeWidth(3)
        .aspect(16, 9)
        .marginLeft(45);
    //call data
    d3.csv("./static/MAR16.csv", function(data) {
        data = data.filter(function(row) {
            return row['LinkRef'] == 'AL1000';
        })
        d3.select("#flot-line-chart")
            .datum(data)
            .call(graphic1)
            .call(zoom);
    });
    //end chart
</script>-->

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    var filter = {{filter|tojson}};
    filter = JSON.parse(filter);
    var div = d3.select("#flot-line-chart");

    var width = div.attr('width');
    var height = div.attr('height');
    var svg = d3.select("#flot-line-chart"),
        margin = {
            top: 20,
            right: 20,
            bottom: 110,
            left: 40
        },
        margin2 = {
            top: 430,
            right: 20,
            bottom: 30,
            left: 40
        },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        height2 = +svg.attr("height") - margin2.top - margin2.bottom;


    var format = d3.timeParse("%m/%d/%y %H:%M");
    var dayformat = d3.timeParse("%m/%d/%y");

    var x = d3.scaleTime().range([0, width]), //format(d3.timeFormat("%y/%m/%d")),
        x2 = d3.scaleTime().range([0, width]),
        y = d3.scaleLinear().range([height, 0]),
        y2 = d3.scaleLinear().range([height2, 0]);

    var xAxis = d3.axisBottom(x), //.tickFormat(d3.timeFormat("%y/%m/%d")),
        xAxis2 = d3.axisBottom(x2), //.tickFormat(d3.timeFormat("%y/%m/%d")),
        yAxis = d3.axisLeft(y);

    function pad(num, n) {
        return Array(n > num ? (n - ('' + num).length + 1) : 0).join(0) + num;
    }
    var brush = d3.brushX()
        .extent([
            [0, 0],
            [width, height2]
        ])
        .on("brush end", brushed);

    var zoom = d3.zoom()
        .scaleExtent([1, Infinity])
        .translateExtent([
            [0, 0],
            [width, height]
        ])
        .extent([
            [0, 0],
            [width, height]
        ])
        .on("zoom", zoomed);

    var area = d3.area()
        .curve(d3.curveMonotoneX)
        .x(function(d) {
            return x(d.date);
        })
        .y0(height)
        .y1(function(d) {
            return y(d.flow);
        });

    var area2 = d3.area()
        .curve(d3.curveMonotoneX)
        .x(function(d) {
            return x2(d.date);
        })
        .y0(height2)
        .y1(function(d) {
            return y2(d.Flow);
        });

    svg.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

    var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var context = svg.append("g")
        .attr("class", "context")
        .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");


    d3.csv("./static/MAR15.csv", type, function(data) {
        
        if (filter['LinkRef']){
            data = data.filter(function(row) {
                return row['LinkRef'] == filter['LinkRef'];
             })
        };

        if (filter['DataQuality']){
            data = data.filter(function(row) {
                return row['DataQuality'] == filter['DataQuality'];
             })
        }; 

        if (filter['toDate']){
            data = data.filter(function(row) {
                return row['Date'] < filter['toDate'];
             })
        };
        
        if (filter['fromDate']){
            data = data.filter(function(row) {
                return row['Date'] > filter['fromDate'];
             })
        };

        x.domain(d3.extent(data, function(d) {
            return d.date;
        }));
        y.domain([0, d3.max(data, function(d) {
            return d.flow;
        })]);
        x2.domain(x.domain());
        y2.domain(y.domain());

        focus.append("path")
            .datum(data)
            .attr("class", "area")
            .attr("d", area);

        focus.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        focus.append("g")
            .attr("class", "axis axis--y")
            .call(yAxis);

        context.append("path")
            .datum(data)
            .attr("class", "area")
            .attr("d", area2);

        context.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + height2 + ")")
            .call(xAxis2);

        context.append("g")
            .attr("class", "brush")
            .call(brush)
            .call(brush.move, x.range());

        svg.append("rect")
            .attr("class", "zoom")
            .attr("width", width)
            .attr("height", height)
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .call(zoom);
    });

    function brushed() {
        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
        var s = d3.event.selection || x2.range();
        x.domain(s.map(x2.invert, x2));
        focus.select(".area").attr("d", area);
        focus.select(".axis--x").call(xAxis);
        svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
            .scale(width / (s[1] - s[0]))
            .translate(-s[0], 0));
    }

    function zoomed() {
        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
        var t = d3.event.transform;
        x.domain(t.rescaleX(x2).domain());
        focus.select(".area").attr("d", area);
        focus.select(".axis--x").call(xAxis);
        context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
    }

    function type(d) {
        var m = (d.TimePeriod * 15) % 60;
        var h = parseInt((d.TimePeriod * 15) / 60);
        var b = d.Date + ' ' + pad(h, 2) + ':' + pad(m, 2);
        d.date = format(b);
        d.flow = +d.Flow;
        return d;
    }
</script>

<!--<script>
    var margin = {
            top: 30,
            right: 10,
            bottom: 10,
            left: 10
        },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal().rangePoints([0, width], 1),
        y = {},
        dragging = {};

    var line = d3.svg.line(),
        axis = d3.svg.axis().orient("left"),
        background,
        foreground;

    var svg = d3.select("#flot-multiple-axes-chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("./static/MAR16.csv", function(error, cars) {

        // Extract the list of dimensions and create a scale for each.
        x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
            return d != "LinkDescription" && d != "LinkRef" && d != "TimePeriod" && d != "Date" && (y[d] = d3.scale.linear()
                .domain(d3.extent(cars, function(p) {
                    return +p[d];
                }))
                .range([height, 0]));
        }));

        // Add grey background lines for context.
        background = svg.append("g")
            .attr("class", "background")
            .selectAll("path")
            .data(cars)
            .enter().append("path")
            .attr("d", path);

        // Add blue foreground lines for focus.
        foreground = svg.append("g")
            .attr("class", "foreground")
            .selectAll("path")
            .data(cars)
            .enter().append("path")
            .attr("d", path);

        // Add a group element for each dimension.
        var g = svg.selectAll(".dimension")
            .data(dimensions)
            .enter().append("g")
            .attr("class", "dimension")
            .attr("transform", function(d) {
                return "translate(" + x(d) + ")";
            })
            .call(d3.behavior.drag()
                .origin(function(d) {
                    return {
                        x: x(d)
                    };
                })
                .on("dragstart", function(d) {
                    dragging[d] = x(d);
                    background.attr("visibility", "hidden");
                })
                .on("drag", function(d) {
                    dragging[d] = Math.min(width, Math.max(0, d3.event.x));
                    foreground.attr("d", path);
                    dimensions.sort(function(a, b) {
                        return position(a) - position(b);
                    });
                    x.domain(dimensions);
                    g.attr("transform", function(d) {
                        return "translate(" + position(d) + ")";
                    })
                })
                .on("dragend", function(d) {
                    delete dragging[d];
                    transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
                    transition(foreground).attr("d", path);
                    background
                        .attr("d", path)
                        .transition()
                        .delay(500)
                        .duration(0)
                        .attr("visibility", null);
                }));

        // Add an axis and title.
        g.append("g")
            .attr("class", "axis")
            .each(function(d) {
                d3.select(this).call(axis.scale(y[d]));
            })
            .append("text")
            .style("text-anchor", "middle")
            .attr("y", -9)
            .text(function(d) {
                return d;
            });

        // Add and store a brush for each axis.
        g.append("g")
            .attr("class", "brush")
            .each(function(d) {
                d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brushstart", brushstart).on("brush", brush));
            })
            .selectAll("rect")
            .attr("x", -8)
            .attr("width", 16);
    });

    function position(d) {
        var v = dragging[d];
        return v == null ? x(d) : v;
    }

    function transition(g) {
        return g.transition().duration(500);
    }

    // Returns the path for a given data point.
    function path(d) {
        return line(dimensions.map(function(p) {
            return [position(p), y[p](d[p])];
        }));
    }

    function brushstart() {
        d3.event.sourceEvent.stopPropagation();
    }

    // Handles a brush event, toggling the display of foreground lines.
    function brush() {
        var actives = dimensions.filter(function(p) {
                return !y[p].brush.empty();
            }),
            extents = actives.map(function(p) {
                return y[p].brush.extent();
            });
        foreground.style("display", function(d) {
            return actives.every(function(p, i) {
                return extents[i][0] <= d[p] && d[p] <= extents[i][1];
            }) ? null : "none";
        });
    }
</script>-->
{%endblock%}